*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.15;
  color: #303133;
  background-color: #fff;
}

a {
  color: mix(#fff, $--color-primary, 20%);
  text-decoration: none;

  &:focus,
  &:hover {
    color: $--color-primary;
    text-decoration: underline;
  }
}

img {
  vertical-align: middle;
}


/* Utils
------------------------------ */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}


/* Animation
------------------------------ */
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}


/* Reset element-ui
------------------------------ */
.site-wrapper {
  .el-pagination {
    margin-top: 15px;
    text-align: right;
  }
}


/* Layout
------------------------------ */
.site-wrapper {
  position: relative;
  min-width: 1180px;
}


/* Sidebar fold
------------------------------ */
.site-sidebar--fold {

  .site-navbar__header,
  .site-navbar__brand,
  .site-sidebar,
  .site-sidebar__inner,
  .el-menu.site-sidebar__menu {
    width: 64px;
  }

  .site-navbar__body,
  .site-content__wrapper {
    margin-left: 64px;
   
  }

  .site-navbar__brand {
    &-lg {
      display: none;
    }

    &-mini {
      display: inline-block;
    }
  }

  .site-sidebar,
  .site-sidebar__inner {
    overflow: initial;
  }

  .site-sidebar__menu-icon {
    margin-right: 0;
    font-size: 20px;
  }

  .site-content--tabs>.el-tabs>.el-tabs__header {
    left: 64px;
  }
}

// animation
.site-navbar__header,
.site-navbar__brand,
.site-navbar__body,
.site-sidebar,
.site-sidebar__inner,
.site-sidebar__menu.el-menu,
.site-sidebar__menu-icon,
.site-content__wrapper,
.site-content--tabs>.el-tabs .el-tabs__header {
  transition: inline-block .3s, left .3s, width .3s, margin-left .3s, font-size .3s;
}


/* Navbar
------------------------------ */
.site-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999999;
  height: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  background-color: $navbar--background-color;

  &--inverse {
    .site-navbar__body {
      background-color: transparent;
    }

    .el-menu {

      >.el-menu-item,
      >.el-submenu>.el-submenu__title {
        color: #fff;

        &:focus,
        &:hover {
          color: #fff;
          background-color: mix(rgb(248, 6, 6), $navbar--background-color, 15%);
        }
      }

      >.el-menu-item.is-active,
      >.el-submenu.is-active>.el-submenu__title {
        border-bottom-color: mix(#fff, $navbar--background-color, 85%);
      }

      .el-menu-item i,
      .el-submenu__title i,
      .el-dropdown {
        color: #fff;
      }
    }

    .el-menu--popup-bottom-start {
      background-color: $navbar--background-color;
    }
  }

  &__header {
    position: relative;
    float: left;
    width: 230px;
    height: 50px;
    overflow: hidden;
  }

  &__brand {
    display: table-cell;
    vertical-align: middle;
    width: 230px;
    height: 50px;
    margin: 0;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;

    &-lg,
    &-mini {
      margin: 0 5px;
      color: #fff;

      &:focus,
      &:hover {
        color: #fff;
        text-decoration: none;
      }
    }

    &-mini {
      display: none;
    }
  }

  &__switch {
    font-size: 18px;
    border-bottom: none !important;
  }

  &__avatar {
    border-bottom: none !important;

    * {
      vertical-align: inherit;
    }

    .el-dropdown-link {
      color: rgb(101, 165, 249);
      >img {
        width: 36px;
        height: auto;
        margin-right: 5px;
        border-radius: 100%;
        vertical-align: middle;
      }
    }
  }

  &__body {
    position: relative;
    margin-left: 230px;
    padding-right: 15px;
    background-color: #0D2D69;
  }
  // &__menu:hover{
  //   background-color: red;
  // }
  &__menu {
    float: left;
    background-color: transparent;
    border-bottom: 0;

    &--right {
      float: right;
    }

    a:focus,
    a:hover {
      text-decoration: none;
    }

    .el-menu-item,
    .el-submenu>.el-submenu__title {
      height: 50px;
      line-height: 50px;
    }

    .el-submenu>.el-menu {
      top: 55px;
    }

    .el-badge {
      display: inline;
      z-index: 2;

      &__content {
        line-height: 16px;
      }
    }
  }
}


/* Sidebar
------------------------------ */
.site-sidebar {
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  z-index: 1020;
  width: 230px;
  overflow: hidden;

  &--dark,
  &--dark-popper {
    background-color: $sidebar--background-color-dark;

    .site-sidebar__menu.el-menu,
    >.el-menu--popup {
      background-color: $sidebar--background-color-dark;

      .el-menu-item,
      .el-submenu>.el-submenu__title {
        color: $sidebar--color-text-dark;

        &:focus,
        &:hover {
          color: mix(#fff, $sidebar--color-text-dark, 50%);
          background-color: mix(#fff, $sidebar--background-color-dark, 2.5%);
        }
      }

      .el-menu,
      .el-submenu.is-opened {
        background-color: mix(#000, $sidebar--background-color-dark, 15%);
      }

      .el-menu-item.is-active,
      .el-submenu.is-active>.el-submenu__title {
        color: mix(#fff, $sidebar--color-text-dark, 80%);
      }
    }
  }

  &__inner {
    position: relative;
    z-index: 1;
    width: 250px;
    height: 100%;
    padding-bottom: 15px;
    overflow-y: scroll;
  }

  &__menu.el-menu {
    width: 230px;
    border-right: 0;
  }

  &__menu-icon {
    width: 24px;
    margin-right: 5px;
    text-align: center;
    font-size: 16px;
    color: inherit !important;
  }
}


/* Content
------------------------------ */
.site-content {
  position: relative;
  padding: 15px;

  &__wrapper {
    position: relative;
    padding-top: 50px;
    margin-left: 230px;
    min-height: 100%;
    background: $content--background-color;
  }

  &--tabs {
    padding: 55px 0 0;
  }

  >.el-tabs {
    >.el-tabs__header {
      position: fixed;
      top: 50px;
      left: 230px;
      right: 0;
      z-index: 930;
      padding: 0 55px 0 15px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
      background-color: #26488A;

      >.el-tabs__nav-wrap {
        margin-bottom: 0;

        &:after {
          display: none;
        }
      }
    }

    >.el-tabs__content {
      padding: 0 15px 15px;

      >.site-tabs__tools {
        position: fixed;
        top: 50px;
        right: 0;
        z-index: 931;
        height: 50px;
        padding: 0 12px;
        font-size: 16px;
        line-height: 40px;
        background-color: #26488A;
        cursor: pointer;

        .el-icon--right {
          margin-left: 0;
        }
      }
    }
  }
}

.el-table__expand-icon {
  display: inline-block;
  width: 14px;
  vertical-align: middle;
  margin-right: 5px;
}
.el-message{
  top: 120px;
}
.pushContent .el-textarea__inner{
  background-color: transparent;
  border: 0;
  color: #fff;
}
.changeSystem .el-input__inner{
  background-color: transparent;
  // border: 1px solid #73D2EC;
  box-shadow: -1px 0px 7px 5px #0C458F inset;
}
// nav
.el-tabs__nav-scroll{
  height: 50px;
}
.el-tabs__item{
  height: 30px;
  line-height: 30px;
  color: #dedede;
  margin: 20px 10px 0 0;
  background: #3A80C9;
}
.el-tabs__item.is-active{
  background: #46A8F4;
  color: #fff;
}
.el-dropdown{
  color: #fff;
}
 .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}
.el-tabs--top .el-tabs__item.is-top:last-child{
  padding-right: 20px;
}
// body背景
.site-content{
  // background: url('~@/assets/img/h_bg.png') no-repeat;
  min-height: calc(100vh - 50px);
}
// 弹框
.el-dialog__body{
  color: #fff;
}
.el-dialog{
  background: #0D2D69;
}
.el-dialog__title{
  color: #fff !important;
}
.el-dialog__headerbtn .el-dialog__close{
  color: #fff !important;
}
.el-form-item__label{
  color: #fff;
}
.el-radio{
  color: #fff;
}
.scene_title,.scene_name{
  color: #fff;
}
// 分页样式
.el-pagination__total,.el-pagination__jump{
  color: #fff;
}
.site-sidebar--dark .site-sidebar__menu.el-menu .el-menu-item.is-active{
  color: #70B6E2;
  // background: red;
}
.el-pagination button:disabled {
  color: #fff;
  background-color: transparent;
}
.el-pager li{
  background: transparent;
  color: #fff;
}
.el-pager li.btn-quicknext{
  color: #fff;
}
.el-pagination .btn-next{
  background: transparent;
  color: #fff;
}
// card
.el-card{
  background:rgba(12, 43, 100, .8);
  border: 0;
  color: #fff;
}
.el-card.is-always-shadow{
  box-shadow: -1px 0px 7px 5px #2C5190 inset;
}
// input
.el-input /deep/ .el-input__inner{
  background: transparent !important;
}
.el-input__inner{
  box-shadow: -1px 0px 7px 5px #2C5190 inset;
  // border: 1px solid #73D2EC;
  border: 0;
  color: #fff;
  background: transparent;
}
.el-textarea /deep/ .el-textarea__inne{
  background-color: transparent !important;
  border: 1px solid transparent !important;
}
.el-textarea__inner{
  background: transparent;
  border: 1px solid #73D2EC;
}
.el-textarea.is-disabled .el-textarea__inner{
  background: transparent;
}
.el-textarea__inner{
  color: #fff;
}
.el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner{
  background-color: transparent;
  color: #fff;
  // border: 1px solid #73D2EC;
  border: 0;
  box-shadow: -1px 0px 7px 5px #2C5190 inset;
}
// table
.el-table tr{
  background: 0;
}
.el-table{
  background: transparent;
  color: #fff;
}
.el-table thead{
  background: rgba(38, 74, 144, .8);
  color: #fff;
}
.el-table th, .el-table tr{
  background: transparent;
}
.el-table td{
  // border-bottom: 1px solid #73D2EC;
}
.el-table--striped .el-table__body tr.el-table__row--striped td{
  background: transparent;
}
.el-table--enable-row-hover .el-table__body tr:hover{
  background: linear-gradient(
        to right,
        rgba(42,89,179, 0.1),
        rgba(42,89,179, 0.7),
        rgba(42,89,179, 0.1)
      );
  // background: linear-gradient(
  //       to right,
  //       rgba(115, 210, 236, 0.2),
  //       rgba(115, 210, 236, 1),
  //       rgba(115, 210, 236, 0.2)
  //     );
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
  // background: #73D2EC;
  background: transparent;
  // background: linear-gradient(
  //       to right,
  //       rgba(115, 210, 236, 0.2),
  //       rgba(115, 210, 236, 1),
  //       rgba(115, 210, 236, 0.2)
  //     );
  
}

.el-table {
  /deep/tbody tr:hover>td { 
      background-color:#73D2EC !important; 
  }
}
.hover-row{
  background-color: #73D2EC !important; 
}
.el-table td.is-center{
  background-color: transparent;
  color: #fff;
}
.el-table--border:after,.el-table--group:after,.el-table:before {
  background-color:#ccc;
}
.el-table:before{
  // background-color: red;
}
.el-table--group:after{
  // background-color: red;
}
.el-table--border:after {
  // background-color: red;
}
.el-table--border:after,.el-table--group:after,.el-table:before {
  background-color:rgb(42,89,179);
}
.el-table--border,.el-table--group {
  border-color:rgb(42,89,179);
}
.el-table td,.el-table th.is-leaf {
      border-bottom: 1px solid rgba(42,89,179,.7);//表格-横线颜色
}
.el-table--border th,.el-table--border th.gutter:last-of-type {
      border-bottom: 1px solid rgba(42,89,179,.7);//表头-横线颜色
}
.el-table--border td,.el-table--border th {
      border-right: 1px solid rgba(42,89,179,.7);//表格-竖线颜色
}
// .el-table--border,.el-table--group {
//   border-color:#ccc;
// }
// .el-table td,.el-table th.is-leaf {
//       border-bottom: 1px solid #ccc;//表格-横线颜色
// }
// .el-table--border th,.el-table--border th.gutter:last-of-type {
//       border-bottom: 1px solid #ccc;//表头-横线颜色
// }
// .el-table--border td,.el-table--border th {
//       border-right: 1px solid #ccc;//表格-竖线颜色
// }
.el-table {
// border: 1px solid #ccc;
// border-radius: 4px;
}
// .el-table__header-wrapper {background-color: #f5f7fa;}
.el-table__header th {
  // color: #333;
}
.el-table__body td {
  // color: #666;
}

.el-date-editor .el-range-separator{
  color: white;
}
.el-tree-node:focus > .el-tree-node__content {
  background-color: #73D2EC !important;
}
.el-tree-node__content:hover{
  background-color: #73D2EC !important;
}
.el-tree{
  background: transparent !important;
  color: #fff !important;
}